<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title>使用 &lt;output/&gt; 元素</title>
</head>
<body>
<form id="form1" name="form1">
    <p><label for="min-value">Min: <input id="min-value" type="number" name="minValue"></label></p>
    <p><label for="max-value">Max: <input id="max-value" type="number" name="maxValue"></label></p>
    <p><label for="step-value">Setp: <input id="step-value" type="number" name="stepValue"></label></p>
    <p><label for="slider"><input id="slider" type="range" name="slider"></label></p>
</form>
<output id="result" name="result" form="form1" for="slider"></output>
<script>
    var myForm = document.form1;
    var result = myForm.result;

    function formInputChange() {
        var slider = myForm.slider;
        slider.min = parseFloat(myForm.minValue.value);
        slider.max = parseFloat(myForm.maxValue.value);
        slider.step = parseFloat(myForm.stepValue.value);
        result.value = slider.value;
    }

    myForm.addEventListener('input', formInputChange);
</script>
</body>
</html>